{% extends "base.html" %}
{% block content %}
<!-- 本页样式表 -->
<!--font-awesome-->
<link href="{{url_for('static',filename='css/detail.css')}}" rel="stylesheet" />
<link href="{{url_for('static',filename='css/blog.css')}}" rel="stylesheet" />
<!--font-awesome-->
    <div class="blog-body">
        <div class="blog-container">
            {% if is_edit_status %}
            <div class="blog-main">
                <div id="parentArticleList" class="animated slideInLeft">
                    <div class="blog-module shadow" style="box-shadow: 0 1px 8px #a6a6a6;">
                        <fieldset class="layui-elem-field layui-field-title" style="margin-bottom:0">
                            <legend>来说两句吧</legend>
                            <div class="layui-field-box">
                                <form class="layui-form" method="post" action="">
                                    <input name="id" value="{{id | default(0)}}" type="hidden">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">标题</label>
                                        <div class="layui-input-block">
                                          <input type="text" name="title" lay-verify="title|required" autocomplete="off" placeholder="请输入标题" class="layui-input" value="{{data.title | default('')}}">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                    <textarea id="mytextarea" name="body"  placeholder="请输入内容">{{body | default('')}}</textarea>
                                    </div>
                                    <div class="layui-form-item">
                                            <button type="button" lay-submit class="layui-btn" id="formDemo" lay-filter="formDemo">save</button>
                                    </div>
                                </form>
                            </div>
                        </fieldset>
                    </div>
                </div>
            </div>
            {% else %}
            <div class="blog-main">
                <div id="parentArticleList" class="blog-main-left animated slideInLeft">
                    <div class="article-detail shadow">
                        <div id="articleContent" style="overflow: hidden;word-wrap: break-word;" class="article-detail-content">
                            <h2 style="text-align: center;">{{data.title | default('')}}</h2><br />
                            {% autoescape false %}
                                {{body | default('')}}
                            {% endautoescape %}
                        </div>
                        <div class="article-detail-info">
                            <span>编辑时间：{{data.create_time| default("")}}</span>
                            <span >作者： <a style="color: blue" href="{{url_for('user', username=data.author.username)}}">{{data.author.username| default("")}}</a></span>
                            <span>浏览量：{{data.views}}</span>
                        </div>
                       
                    </div>
                </div>
                <div class="blog-main-right">
                    <div class="blog-module shadow">
                        <div class="blog-module-title ">随便看看</div>
                        <ul class="blog-module-ul">
                            {% for item in popular_ten_datasss %}
                                <li>
                                    <span>
                                        {% autoescape false %}
                                            {{item.color | default('')}}
                                        {% endautoescape %}
                                   </span> &nbsp;&nbsp;
                                    <a href="{{url_for('article_editor')}}?id={{item.id}}">{{item.title}}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
            {% endif %}
            <div class="clear "></div>
        </div>
    </div>
<!-- <div class="blog-mask animated layui-hide"></div> -->
<!-- 编辑器源码文件 -->
<script type="text/javascript">
    layui.use('form', function(){
        var $ = layui.$;
        var form = layui.form;
        
        form.on('submit(formDemo)', function(data){
            var myEditor = tinymce.get('mytextarea');
            var content = myEditor.getContent();
            var id = data.field.id
            var text_body = myEditor.getContent({ 'format' : 'text' });
            // console.log(id);return false
            $.post("{{url_for('article_editor')}}",{'csrf_token':"{{csrf_token()}}",'body':content, 'id':id,'text_body':text_body,'title':data.field.title},function(res){
                // console.log(res);return false
              if(res.code==200){
                layer.msg(res.msg,{icon:1,time: 1500},function(){
                    window.location.href = res.url
                    return false
                })
              }else{
                layer.msg(res.msg,{icon:2,time: 1500})
                return false
              }
            })
            return false; // 阻止默认 form 跳转
            
        });
    });

</script>
 <!-- 加载编辑器的容器 -->
 <!-- 编辑器源码文件 -->
<script type="text/javascript" src="{{url_for('static',filename='tinymce/js/tinymce/tinymce.min.js')}}"></script>
<script  type="text/javascript" src="{{url_for('static',filename='tinymce/js/tinymce/langs/zh_CN.js')}}"></script>
<script type="text/javascript">

    const example_image_upload_handler = (blobInfo, progress) => new Promise( (resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', "{{url_for('tinymce_upload_images')}}");

        xhr.upload.onprogress = (e) => {
            progress(e.loaded / e.total * 100);
        };

        xhr.onload = () => {
            if (xhr.status === 403) {
            reject({ message: 'HTTP Error: ' + xhr.status, remove: true });
            return;
            }

            if (xhr.status < 200 || xhr.status >= 300) {
            reject('HTTP Error: ' + xhr.status);
            return;
            }

            const json = JSON.parse(xhr.responseText);

            if (!json || typeof json.location != 'string') {
            reject('Invalid JSON: ' + xhr.responseText);
            return;
            }

            resolve(json.location);
        };

        xhr.onerror = () => {
            reject('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
        };

        const formData = new FormData();
        formData.append('file', blobInfo.blob(), blobInfo.filename());
        formData.append('csrf_token', "{{csrf_token()}}");
        xhr.send(formData);
    });

    // 手册 https://www.tiny.cloud/
    tinymce.init({
        selector: '#mytextarea',
        auto_focus: true,
        skin: 'oxide-dark',
        plugins: 'image, removeformat',
        powerpaste_word_import: 'merge', // 可以选择'merge', 'clear', 或 'propmt'
        powerpaste_html_import: 'merge', // 可以选择'merge', 'clear', 或 'propmt'
        powerpaste_allow_local_images: true, // 允许本地图片
        powerpaste_data_images: true, // 允许粘贴的数据图片
        toolbar: [
            'undo redo cut copy paste || styles | bold italic | link image | alignleft aligncenter alignright alignjustify | indent | fontsize' ,
        ],
        menubar: 'edit',
        language: 'zh_CN', // 中文语言包
        // 在这里添加您的 TinyMCE 配置选项
        // 图片上传处理程序
        automatic_uploads: true,
        images_upload_handler: example_image_upload_handler
    });
</script>


{% endblock %}